<style type="text/css">
		#fm{
			margin:0;
			padding:10px 30px;
		}
		.ftitle{
			font-size:14px;
			font-weight:bold;
			color:#666;
			padding:5px 0;
			margin-bottom:10px;
			border-bottom:1px solid #ccc;
		}
		.fitem{
			margin-bottom:5px;
		}
		.fitem label{
			display:inline-block;
			width:80px;
		}
	</style>
	<script type="text/javascript">
		var url;
		function newUser(){
			$('#dlg').dialog('open').dialog('setTitle','New Association');
			$('#fm').form('clear');
			url = '<?= site_url("associations/save_association")?>';
		}
		function editUser(){
			var row = $('#dg').datagrid('getSelected');
			if (row){
				$('#dlg').dialog('open').dialog('setTitle','Edit Association');
				$('#fm').form('load',row);
				url = '<?= site_url("associations/update_association")?>/'+row.id;
			}
		}
		function saveUser(){
			console.log('saveUser');
			$('#fm').form('submit',{
				url: url,
				onSubmit: function(){
					console.log('saveUser|onSubmit' + $(this).form('validate'));
					return $(this).form('validate');
				},
				success: function(result){
					console.log('saveUser|success' + result);
					var result = eval('('+result+')');
					if (result.success){
						$('#dlg').dialog('close');		// close the dialog
						$('#dg').datagrid('reload');	// reload the user data
					} else {
						$.messager.show({
							title: 'Error',
							msg: result.msg
						});
					}
				}
			});
		}
		function removeUser(){
			var row = $('#dg').datagrid('getSelected');
			if (row){
				$.messager.confirm('Confirm','Are you sure you want to remove this user?',function(r){
					if (r){
						$.post('<?= site_url("associations/remove_association")?>',{id:row.id},function(result){
							if (result.success){
								$('#dg').datagrid('reload');	// reload the user data
							} else {
								$.messager.show({	// show error message
									title: 'Error',
									msg: result.msg
								});
							}
						},'json');
					}
				});
			}
		}
	</script>
	
	<h2>Associations CRUD Application</h2>

	
	<table id="dg" title="My Users" class="easyui-datagrid" style="width:700px;height:250px"
			url="<?= site_url("associations/get_all")?>"
			toolbar="#toolbar" rownumbers="true" fitColumns="true" singleSelect="true" pagination="true">
		<thead>
			<tr>
				<th field="raison_social" width="50">raison_social</th>
				<th field="sigle" width="50">sigle</th>
				<th field="adresse" width="50">adresse</th>
				<th field="telephone" width="50">telephone</th>
				<th field="mail" width="50">mail</th>
				<th field="fondateur" width="50">fondateur</th>
				<th field="date_fondation" width="50">date_fondation</th>
				<th field="contact" width="50">contact</th>
				<th field="description" width="50">description</th>
			</tr>
		</thead>
	</table>
	<div id="toolbar">
		<a href="#" class="easyui-linkbutton" iconCls="icon-add" plain="true" onclick="newUser()">New Association</a>
		<a href="#" class="easyui-linkbutton" iconCls="icon-edit" plain="true" onclick="editUser()">Edit Association</a>
		<a href="#" class="easyui-linkbutton" iconCls="icon-remove" plain="true" onclick="removeUser()">Remove Associationr</a>
	</div>
	
	<div id="dlg" class="easyui-dialog" style="width:400px;height:500px;padding:10px 20px"
			closed="true" buttons="#dlg-buttons">
		<div class="ftitle">Association Information</div>
		<form id="fm" method="post">
			<div class="fitem">
				<label>raison_social:</label>
				<input name="raison_social" class="easyui-validatebox" required="true">
			</div>
			<div class="fitem">
				<label>sigle:</label>
				<input name="sigle">
			</div>
			<div class="fitem">
				<label>adresse:</label>
				<input name="adresse">
			</div>
			<div class="fitem">
				<label>telephone:</label>
				<input name="telephone">
			</div>
			<div class="fitem">
				<label>mail:</label>
				<input name="mail">
			</div>
			<div class="fitem">
				<label>fondateur:</label>
				<input name="fondateur">
			</div>
			<div class="fitem">
				<label>date_fondation:</label>
				<input name="date_fondation" class="easyui-datebox">
			</div>
			<div class="fitem">
				<label>contact:</label>
				<input name="contact">
			</div>
			<div class="fitem">
				<label>description:</label>
				<textarea name="description" style="height:60px;"></textarea>
			</div>
			
			
		</form>
	</div>
	<div id="dlg-buttons">
		<a href="#" class="easyui-linkbutton" iconCls="icon-ok" onclick="saveUser()">Save</a>
		<a href="#" class="easyui-linkbutton" iconCls="icon-cancel" onclick="javascript:$('#dlg').dialog('close')">Cancel</a>
	</div>
